<template>
    <div class="form-container">
        <div class="group-setting-tip-info">
            1、开启签到合成后，提交的签到数据会经过下方合成效果处理后在大屏端展示;<br>
            2、如果活动未开启分组，但是存在多种合成效果，则会随机使用一种合成效果进行合成<br>
            3、如果活动开启分组，但分组未绑定合成效果，则默认使用一个合成效果。<br>
            4、如果一个分组绑定了多种合成效果，则会随机使用一种绑定的合成效果进行合成。
        </div>
        <h4 class="form-title">签到合成</h4>
        <el-form :model="formData" label-width="120px" ref="groupFormRef">
            <!-- 签到合成开关 -->
            <el-form-item label="签到合成">
                <el-switch v-model="formData.composeSwitch" />
                <el-tooltip effect="dark" content="分组开启后，可以添加客户端配置分组" placement="top">
                    <el-icon class="tip-icon">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="合成效果尺寸" v-if="formData.composeSwitch === true">
                宽 <el-input v-model="formData.width" style="margin:0.6em 1.5em;max-width: 100px" placeholder="500">
                    <template #append>px</template>
                </el-input>
                高 <el-input v-model="formData.height" style="margin:0.6em 1.5em;max-width: 100px" placeholder="500">
                    <template #append>px</template>
                </el-input>
                <el-tooltip effect="dark" content="分组开启后，可以添加客户端配置分组" placement="top">
                    <el-icon class="tip-icon">
                        <QuestionFilled />
                    </el-icon>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary">保存合成配置</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 底部操作栏 -->
    <FixedActionBar :visible="true">
        <!-- 主要操作按钮 -->
        <el-button @click="$router.push('/project-list')">
            返回
        </el-button>
        <el-button type="primary" @click="openScreen">
            <el-icon>
                <Monitor />
            </el-icon>
            进入大屏
        </el-button>
    </FixedActionBar>
</template>

<script>
import FixedActionBar from '@/components/common/BottomActionBar.vue'
export default {
    components: {
        FixedActionBar,
    },
    props: {
        acid: {
            type: String,
            required: true
        },
        initialData: {
            type: Object,
            default: () => ({
                composeSwitch: false,
            })
        }
    },
    data() {
        return {
            formData: { ...this.initialData }
        }
    },
    methods: {
        async saveSetting() {
            try {
                // 这里实现保存逻辑
                console.log('保存签到合成设置', this.acid)
                return { signInCompose: {} }
            } catch (error) {
                console.error('保存签到合成设置失败:', error)
                throw error
            }
        },

        // 进入大屏
        openScreen() {
            console.log('进入大屏')
        },
    }
}
</script>

<style scoped>
.placeholder-content {
    color: #909399;
    text-align: center;
    padding: 20px;
}

.group-setting-tip-info {
    width: 95%;
    margin: 10px 20px;
    border: 1px solid #5695f3;
    background: #EAF9FF;
    border-radius: 5px;
    padding: 10px 10px;
}
</style>